<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="/js/echarts.common.min.js"></script>
		<script type="text/javascript" src="/js/jquery-3.1.1.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="main" style="width: 1000px;height: 700px;margin: auto;"></div>

	</body>
	<script>
		$(function () {
			queryAttendByMonth();
		});

		function queryAttendByMonth() {
			var app = echarts.init(document.getElementById("main"))
			option = {
				title: {
					text: '王二狗公司迟到和早退',
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['迟到', '早退']
				},
				toolbox: {
					show: true,
					feature: {
						dataView: {show: true, readOnly: false},
						magicType: {show: true, type: ['line', 'bar']},
						restore: {show: true},
						saveAsImage: {show: true}
					}
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '迟到',
						type: 'bar',
						data: [],
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},

					},
					{
						name: '早退',
						type: 'bar',
						data: [],
						markPoint: {
							data: [
								{type: 'max', name: '最大值'},
								{type: 'min', name: '最小值'}
							]
						},

					}
				]
			};
			$.ajax({
				url: "/echarts/queryAttendByMonth",
				type:"get",
				dataType:"json",
				success: function (data) {
					console.log(data.list[9].lateCounts);
					const obj = data.list;
					const carr = [];
					const zarr = [];
					for(let i=0; i<obj.length; i++){
						const c = obj[i].lateCounts;
						const z = obj[i].leaveCounts;
						carr.push(c);
						zarr.push(z);
					}
					option.series[0].data = carr;
					option.series[1].data = zarr;
					app.setOption(option);
				},
				error:function (err) {
					alert(JSON.stringify(err));
				}
			})


			app.setOption(option);
			//调用echarts的setOption方法来让图标生效
			window.addEventListener("resize",function(){
				app.resize();
			});
		}
	</script>
</html>
